<template>
  <div class="mtop-20">
    <el-card>
        <div class="font-20 font-bold">MV排行榜</div>
        <div class="top-mv-list">
            <div class="font-12" style="color:#9f9f9f">最新更新今天</div>
            <div class="btn-wrap">
                <button
                class="btn-tag"
                v-for="item in areaList"
                :key="item"
                :class="{'isActive' : area_active(item)}"
                @click="changeArea(item)"
                >{{item}}</button>
            </div>
        </div>
        <TopMvList :list="list"></TopMvList>
    </el-card>
  </div>
</template>

<script>
import TopMvList from "@/components/list/MvTopList.vue"
import {getTopMvList} from "@/api/request"
export default {
    components:{TopMvList},
    data () {
        return {
            areaList :['全部', '内地', '港台', '欧美', '日本', '韩国'],
            area:'全部',
            queryInfo:{
                limit:50,
                offset:0,
                area:''
            },
            list:[],
        }
    },
    created(){
        this.getTopData();
    },
    methods:{
        area_active(item){
            return this.area === item
        },
        changeArea(item){
            this.area = item;
            if(item !== '全部'){
                this.queryInfo.area = item;
            } else {
                this.queryInfo.area = '';
            }
            this.getTopData();
        },
        async getTopData(){
            const {data:res} = await getTopMvList(this.queryInfo);
            if(res.code !== 200) return;
            this.list = res.data;
        }
    }
}
</script>

<style lang="less" scoped>
.top-mv-list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
}
.btn-tag{
    height: 26px;
    line-height: 26px;
    border-radius: 13px;
    outline: 0;
    border: 0;
    background-color: #fff;
    padding:  0 10px;
    cursor: pointer;
    color: #676767;
}
.isActive{
    color: red;
    background-color: #fdf5f5;
}
</style>